<template>
  <el-card class="guest-container">
    <template #header>
      <div class="header flex-a flex-b">
        <div>
          <el-input placeholder="请输入手机号" :prefix-icon="Search" v-model="phone" clearable></el-input>
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
        </div>
        <div>
          <el-button type="primary" :icon="ZoomIn" @click="handleBand" v-if="role == 201">绑定推荐官</el-button>
          <el-button type="primary" :icon="Plus" @click="handleSolve">解除禁用</el-button>
          <el-button type="danger" :icon="Delete" @click="handleForbid">禁用账户</el-button>
        </div>
      </div>
    </template>
    <Table action='/users' :phone="phone" ref="table">
      <template #column>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="userId" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="userNo" label="用户编号">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称">
        </el-table-column>
        <el-table-column prop="loginName" label="登录名">
        </el-table-column>
        <el-table-column label="身份状态">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.lockedFlag == 0">正常</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否注销">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.isDeleted == 0">正常</el-tag>
            <el-tag type="danger" v-else>注销</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否为推荐官">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.t == 1">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否为合伙人" v-if="role != 201">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.role == 201">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" v-if="role == 201">
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间">
        </el-table-column>
        <el-table-column label="操作" width="200" v-if="role != 201">
          <template #default="scope">
            <el-button type="primary" style="margin-right: 10px;" @click="handleDetail(scope.row)">详情</el-button>
            <el-dropdown size="small" :hide-on-click="false" :hide-timeout="500">
              <el-button type="primary">
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item><span @click="handleDel(scope.row.userId)">删除</span></el-dropdown-item>
                  <el-dropdown-item><span @click="handleT(scope.row.userId)">{{ scope.row.t == 1 ? '取消' : '设为'
                      }}推荐官</span></el-dropdown-item>
                  <el-dropdown-item v-if="role != 201"><span
                      @click="handleHhr(scope.row.userId)">设为合伙人</span></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </template>
    </Table>
    <el-dialog title="详情" v-model="visible" width="500px" class="guest-dialog">
      <div><span>所属推荐官名称：</span><span>{{ detail.nickName }}</span></div>
      <div><span>所属推荐官号码：</span><span>{{ detail.phone }}</span></div>
    </el-dialog>
    <el-dialog v-model="guestDialog" title="绑定" width="30%">
      <el-form :model="form" ref="formRef">
        <el-form-item label="用户编号" label-width="100px" :rules="[
          {
            required: true,
            message: '请输入用户编号',
            trigger: 'blur',
          },
        ]">
          <el-input v-model="form.userNo" autocomplete="off" />
        </el-form-item>
        <el-form-item label="登录名" label-width="100px" :rules="[
          {
            required: true,
            message: '请输入登录名',
            trigger: 'blur',
          },
        ]">
          <el-input v-model="form.loginName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" label-width="100px">
          <el-input v-model="form.remark" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="guestDialog = false">取消</el-button>
          <el-button type="primary" @click="submit">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Table from '@/components/Table.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Search, ZoomIn } from '@element-plus/icons-vue'
import axios from '@/utils/axios'
import { localGet } from '@/utils'

let table = ref(null)
let phone = ref('')
let role = ref('')
let guestDialog = ref(false)
let visible = ref(false)
let detail = ref({})
let form = ref({})
onMounted(() => {
  const userInfo = localGet('userInfo')
  if (userInfo) {
    role.value = userInfo.role
  }
})
const handleBand = () => {
  form.value = {
    userNo: '',
    loginName: '',
    remark: null
  }
  guestDialog.value = true
}
const handleDetail = (row) => {
  axios.get('/getOrdUserInfo/' + row.userId).then(res => {
    visible.value = true
    detail.value = res
  })
}
const submit = () => {
  axios.get('/setUserResp/' + form.value.loginName + '/' + form.value.userNo + '/' + form.value.remark).then(res => {
    ElMessage({
      message: '绑定成功',
      type: 'success',
    })
    guestDialog.value = false
    table.value.getList()
  })
}
const handleSolve = () => {
  if (!table.value.state.multipleSelection.length) {
    ElMessage.error('请选择项')
    return
  }
  axios.put(`/users/0`, {
    ids: table.value.state.multipleSelection.map(item => item.userId)
  }).then(() => {
    ElMessage.success('解除成功')
    table.value.getList()
  })
}
const handleT = (id) => {
  axios.get('/userSetRecharge/' + id).then(res => {
    ElMessage({
      message: res == 1 ? '设置成功！' : '取消成功！',
      type: 'success',
    })
    table.value.getList()
  })
}
const handleHhr = (id) => {
  axios.get('/setRespUser/' + id).then(res => {
    ElMessage({
      message: '设置成功！',
      type: 'success',
    })
    table.value.getList()
  })
}
const search = () => {
  table.value.getList()
}
const handleDel = (id) => {
  ElMessageBox.confirm(
    '确认删除此项?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.get('/adminUser/delete/' + id).then(res => {
        ElMessage({
          message: '删除成功！',
          type: 'success',
        })
        table.value.getList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const handleForbid = () => {
  if (!table.value.state.multipleSelection.length) {
    ElMessage.error('请选择项')
    return
  }
  axios.put(`/users/1`, {
    ids: table.value.state.multipleSelection.map(item => item.userId)
  }).then(() => {
    ElMessage.success('禁用成功')
    table.value.getList()
  })
}
</script>

<style lang="scss">
.header {
  .el-input {
    width: 240px;
    margin-left: 10px;
  }
}

.guest-dialog {
  div {
    margin-bottom: 10px;
    font-size: 16px;
    padding-left: 20px;
    // span:first-child {
    //   display: inline-block;
    //   width: 100px;
    //   text-align: right;
    // }

    span:last-child {}
  }
}
</style>